<template>
  <!--列表 -->
  <div class="flex-1 flex relative overflow-hidden">
    <BaseList :data-source="dataSource" :loading="loading" class="flex-1 overflow-auto pb-10">
      <template #renderItem="{ item }">
        <div
          :key="item.tcid"
          class="py-2 px-3 flex justify-between items-center list-items"
          :class="{ active: selectItem?.tcid === item.tcid }"
          @click="onSelect(item)"
        >
          <div :class="preview ? 'w-full' : 'w-[80%]'">
            <div class="name font-bold mr-2">{{ item.mc }}</div>
          </div>
        </div>
      </template>
    </BaseList>
  </div>
</template>
<script setup>
// import { ref } from 'vue'

const emit = defineEmits(['select'])
const props = defineProps({
  preview: {
    description: '是否预览模式',
    type: Boolean,
    default: true
  },
  searchKey: {
    description: '搜索关键字',
    type: String,
    default: ''
  },
  searchParams: {
    description: '请求入参',
    type: Object,
    default: () => ({})
  },
  selectItem: {
    description: '选中',
    type: Object,
    default: () => ({})
  }
})
const { loading, dataSource, getData } = useFetch({
  url: '/inp/InpNursingRecord/doAuditInpNursingRecord',
  params: props.searchParams
})

const onSelect = (select) => {
  emit('select', select)
}
defineExpose({
  getData
})
</script>
<style lang="less" scoped>
.list-items {
  cursor: pointer;
  &:hover {
    .dropdown {
      visibility: visible;
    }
  }
  &.active {
    .name {
      color: var(--primary-color);
    }
  }
  .dropdown {
    visibility: hidden;
    transition: all 0.3s;
  }
}
</style>
